<template>
    <div class="page-search-category">
        <van-nav-bar :fixed="true" title="Category" @click-left="$router.back(-1)">
            <!--<van-icon name="search" slot="right" @click="$router.push('/search/search')"/>-->
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div v-show="categoryLoading1" class="main-explore buy-list-explore van-list">
            <div class="van-list__loading">
                <van-loading size="16px" />
                <!--<span class="van-list__loading-text">Loading</span>-->
            </div>
        </div>
        <van-list>
            <van-cell v-for="item in categoryJson" :key="item.id" :title="item.name + ''"
                      @click="getSecondCategory(item)"/>
        </van-list>
        <van-popup class="modal" v-model="subCategoryShow" position="right" :overlay="false">
            <div class="page-sub-category">
                <van-nav-bar
                    :title="category1"
                    class="filter-title"
                    left-arrow
                    @click-left="categoryBack"
                />
                <van-collapse v-model="activeNames" accordion>
                    <div  v-for="item in subCategoryJson">
                        <van-collapse-item :title="item.name" :name="item.id"
                                           :key="item.id" @click.native="getThirdCategory(item)">
                            <span v-for="i in thirdCategoryJson">
                                <van-button style="margin: 0 8px 8px 0;" type="default" size="normal"
                                            :key="i.id" @click="goToGetList(i)">
                                {{i.name}}
                                </van-button>
                            </span>
                        </van-collapse-item>
                    </div>
                </van-collapse>
            </div>
        </van-popup>

        <div style="padding: 40px;"></div>
        <footer-bar ref="footer" footerBar="search"></footer-bar>
    </div>
</template>
<script>
    import {getFirstCategoryData} from '../../static/api/mgc_api'
    import Qs from 'qs'
    import FooterBar from '@/components/FooterBar'
    export default {
        name: 'SearchCategory',
        components: {
            FooterBar
        },
        data() {
            return {
                categoryLoading1: false,
                subCategoryShow: false,
                categoryJson: [],
                subCategoryJson: [],
                thirdCategoryJson: [],
                categoryId: null,
                category: '',
                category1: '',// 第一级选择时作为中间层
                activeNames: '1',
            };
        },
        methods: {
            //catagroy选项 方法 start
            categoryBack(){
                this.subCategoryShow = false;
            },
            getFirstCategory() {
                this.categoryJson = [];
                this.categoryShow = true;
                this.categoryLoading1 = true;
                getFirstCategoryData().then((res) => {
                    let data = res.data;
                    // 下拉菜单数据装载
                    if (data) {
                        if (data.errorID === 0) {

                            let allItem = {
                                "id": 'all',
                                "name": "All",
                                "text": "All",
                                "children": [],
                                "addAll": 1
                            }
                            let property = {
                                "id": 371,
                                "name": "Property",
                                "children": []
                            }
                            let obj = JSON.parse(data.object)
                            obj.unshift(allItem)
                            obj.push(property)
                            this.categoryJson = obj

                        } else {
                            this.$toast(data.message)
                        }
                        this.categoryLoading1 = false;
                    }

                }).catch((e) => {
                    this.$toast('error,please try again leter')
                    this.categoryLoading1 = false;
                })
            },
            getSecondCategory(item) {
                this.subCategoryJson = [];
                this.categoryShow = false;
                if (item.children.length == 0) {
                    this.goToGetList (item);
                } else {
                    if (item.id == 371) {  // property all
                        location.href = 'https://bestproperty.com.mm/webPhone/index.html';
                        return;
                    }
                    this.category1 = item.name;

                    if (!item.children[0].addAll) {
                        let allItem = {
                            "id": item.id,
                            "level": item.level,
                            "name": "All",
                            "text": item.name,
                            "children": [],
                            "addAll": 1
                        }
                        item.children.unshift(allItem)
                    }

                    this.subCategoryJson = item.children;
                    this.subCategoryShow = true;
                }
            },
            getThirdCategory(item) {
                this.thirdCategoryJson = [];
                if (item.children.length == 0) {
                    // 没有子选项时去除下拉效果
                    this.activeNames = '1'

                    this.goToGetList (item);
                } else {

                    if (!item.children[0].addAll) {
                        let allItem = {
                            "id": item.id,
                            "level": item.level,
                            "name": "All",
                            "text": item.name,
                            "children": [],
                            "addAll": 1
                        }
                        item.children.unshift(allItem)
                    }

                    this.thirdCategoryJson = item.children
                }
            },
            goToGetList (item) {

                // 当前是property分类时作跳转
                if (item.id == 371) {  // all
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html';
                    return;
                } else if (item.id == 372) {  // rent
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html#/rent';
                    return;
                } else if (item.id == 374) { // sale
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html#/buy';
                    return;
                } else if (item.id == 376) { // Hostel
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html#/hostel';
                    return;
                } else if (item.id == 378) { // New Development
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html#/newDevelopment';
                    return;
                }

                this.categoryId = item.id;

                if (item.addAll) {
                    this.category = item.text;
                } else {
                    this.category = item.name;
                }
                if (this.categoryId == 'all') {
                    this.$router.push('/buy-list')
                } else {
                    // this.subCategoryShow = false;
                    this.$router.push({
                        // path:'/search/search',
                        path:'/buy-list',
                        query:{
                            categoryId: this.categoryId,
                            category: this.category
                        }
                    })
                }

            },
            //catagroy选项 方法 end
        },
        mounted() {
            this.getFirstCategory()
        },
        beforeRouteLeave (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            let leave = true;
            if (to.path !== '/search/search' && to.path !== '/buy-list') {
                if (this.subCategoryShow) {
                    this.subCategoryShow = false
                    leave = false
                }
            }

            if (leave) {
                next()
            } else {
                next(false)
            }
        }
    }

</script>
<style>
    .page-search-category .van-nav-bar{
        /*background-color: #DDDDDD;*/
        background-color: rgb(255, 153, 0);
        color: #fff;
    }
    .page-search-category .van-nav-bar .van-icon{
        /*color: #2c3e50;*/
        color: #fff;
        /*margin-right: 15px;*/
        font-size: 18px;
    }
    .page-search-category .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
</style>
<style scoped>
    .modal {
        width: 100%;
        height: 100%;
    }
</style>
